<template>
  <div class="mine-index">
    <!-- 用户头像部分 -->
    <template v-if="aliveUserInfo.nickname">
      <AuthorBox :data="aliveUserInfo">
        <router-link :to="{name: 'ChangeInfo'}" >
          <Edit class="icon icon-edit" />
        </router-link>
      </AuthorBox>
    </template>
    <template v-else>
      <router-link tag="div" class="to-login" :to="{name: 'Login'}">点我登入</router-link>
    </template>
    <!-- 用户头像部分 -->

    <!-- 用户功能区域 -->
    <div class="function-area-box flex">
      <div class="function-left-box flex">
        <div class="top-box flex">
          <div class="user-special-box">
            <div class="box-title">文章排名</div>
            <div class="box-content"><span>3</span>000</div>
          </div>
          <div class="user-special-box">
            <div class="box-title">文章篇数</div>
            <div class="box-content"><span>2</span>000</div>
          </div>
        </div>
        <div class="user-bac-box"
          :style="{
            backgroundImage: `url(${aliveUserInfo.cover_url || defaultConfig.USER_COVER_URL})`
          }" 
        >
        </div>
      </div>

      <!-- 右边 -->
      <div class="function-right-box">
        <div class="box-container flex">
          <div class="mine-function-route" v-for="data of mineFunctionRoute.slice(0, 2)" :key="data.name">
            <SelfBox :info="{
              insert: data.name,
              backgroundImage: data.cover_url,
              outsert: ''
            }" :to="data.route"/>
          </div>
        </div>
        <div class="box-container flex">
          <div class="mine-function-route" v-for="data of mineFunctionRoute.slice(2, 4)" :key="data.name">
            <SelfBox :info="{
              insert: data.name,
              backgroundImage: data.cover_url,
              outsert: ''
            }"  :to="data.route"/>
          </div>
        </div>
      </div>
    </div>
    <!-- 用户功能区域 -->
    <div class="service-box flex">
      <router-link class="service-item" tag="div" :to="{name: 'MineArticle'}">我的文章</router-link>
      <router-link class="service-item" tag="div" :to="{name: 'MineCollection'}">我的收藏</router-link>
      <div class="service-item">浏览记录</div>
      <router-link class="service-item" tag="div" :to="{name: 'MineSystemMessage'}">我的消息</router-link>

      <!-- MineSystemMessage -->
    </div>

    <div class="bottom-box flex">

      <div class="vertify-box login-out" @click="loginOut">
        退出登入
      </div>

      <div class="vertify-box change-user" @click="changeUser">
        切换账号
      </div>
    </div>
  </div>
</template>

<script>
import Edit from '__SVG__/edit.svg'
import SelfBox from '__COMPONENTS__/self_adaption/SelfBox.vue'
//登入注册移交到 outLogin 混入去做
import outLogin from '__CORE__/mixins/loginOut.js'
import { GET_USER_INFO } from '__STORE__/operation-type';
import AuthorBox from '__COMPONENTS__/author_box/AuthorBox.vue'
import defaultConfig from '__CONFIG__/base-config.js'
export default {
  name: 'MineIndex',
  mixins: [outLogin],
  components: {
    SelfBox, Edit, AuthorBox
  },
  computed: {
    aliveUserInfo() {
      return this.$store.state.user.aliveUserInfo
    },
    //自定义路由
    mineFunctionRoute() {
      return this.$store.state.globalConfig.mineFunctionRoute
    }
  },
  methods: {

  },
  created() {
    this.defaultConfig = defaultConfig
    //每次进入页面更新用户信息
    this.$store.dispatch(GET_USER_INFO)
  },
  mounted() {
    
  }
}
</script>

<style lang="less">
  @import url('__CSS__/mine_index/mine_index.less');
</style>